<template>
  <div class="menu-container">
    <div class="selected-container">
      <span class="select-name">{{ selectName }}</span>
      <span class="select-names">{{ selectNameStr }}</span>
      <div v-if="selectId !== '0'">
        <span class="uncollect-button" v-if="isCollect" @click="onCollect(false)">取消关注</span>
        <span class="collect-button" v-else @click="onCollect(true)">关注该类目</span>
      </div>
    </div>
    <div class="menu-list">
      <div class="label">
        选择类目
      </div>
      <div :class="selectId === '0' ? 'menu-item act-item' : 'menu-item'" :style="selectId === '0' ? 'cursor:auto' : ''"
        @click="onselect('0', undefined, '全品类')">
        <MenuIcon :id="0" :selectId="selectId"></MenuIcon>
        <!-- <img :src="selectId === '0' ? '@i/menu/0.png' : '@i/menu/a-0.png'"
          style="width: 20px;height: 20px;margin-right: 4px;"> -->
        全品类
      </div>
      <template v-for="(item, index) in listData" :key="item.id">
        <div :class="selectId === item.id ? 'menu-item act-item' : 'menu-item'"
          :style="selectId === item.id ? 'cursor:auto' : ''">
          <span class="flex1" @click="onselect(item.id, item.level, item.name)">
            <MenuIcon :id="item.id" :selectId="selectId"></MenuIcon>
            {{ item.name }}
          </span>
          <div v-if="item.sons && item.sons.length > 0" class="arrow-icon" @click="item.showSon = !item.showSon">
            <!-- <up-outlined v-if="item.showSon" /> -->
            <!-- <down-outlined v-else /> -->
            <img src="@i/icon/up-arrow.png" v-if="item.showSon">
            <img src="@i/icon/down-arrow.png" v-else>
          </div>
        </div>
        <template v-for="(secondItem) in item.sons" :key="secondItem.id" v-if="item.showSon">
          <div :class="selectId === secondItem.id ? 'second-menu-item act-item' : 'second-menu-item'"
            :style="selectId === secondItem.id ? 'cursor:auto' : ''">
            <span class="flex1" @click="onselect(secondItem.id, secondItem.level, item.name, secondItem.name)">
              {{ secondItem.name }}
            </span>
            <div v-if="secondItem.sons && secondItem.sons.length > 0" class="arrow-icon"
              @click="secondItem.showSon = !secondItem.showSon">
              <!-- <up-outlined v-if="secondItem.showSon" />
              <down-outlined v-else /> -->
              <img src="@i/icon/up-arrow.png" v-if="secondItem.showSon">
              <img src="@i/icon/down-arrow.png" v-else>
            </div>
          </div>
          <template v-for="(thirdItem) in secondItem.sons" :key="thirdItem.id" v-if="secondItem.showSon">
            <div :class="selectId === thirdItem.id ? 'third-menu-item act-item' : 'third-menu-item'"
              :style="selectId === thirdItem.id ? 'cursor:auto' : ''">
              <span class="flex1"
                @click="onselect(thirdItem.id, thirdItem.level, item.name, secondItem.name, thirdItem.name)">
                {{ thirdItem.name }}
              </span>
              <div v-if="thirdItem.sons && thirdItem.sons.length > 0" class="arrow-icon"
                @click="thirdItem.showSon = !thirdItem.showSon">
                <!-- <up-outlined v-if="thirdItem.showSon" /> -->
                <!-- <down-outlined v-else /> -->
                <img src="@i/icon/up-arrow.png" v-if="thirdItem.showSon">
                <img src="@i/icon/down-arrow.png" v-else>
              </div>
            </div>
          </template>
        </template>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  DownOutlined,
  UpOutlined,
} from '@ant-design/icons-vue';
import { ref, onMounted } from 'vue'
import { getSheinTypeTree, getSheinType } from '@r/api/productType'
import { subType, unSubType } from '@r/api/userSub'
import { message } from 'ant-design-vue';
import MenuIcon from '@c/menuIcon/index.vue';

let listData = ref<any[]>([])
let selectId = ref<string>('0')
let selectNameStr = ref<string>('全品类')
let selectName = ref<string>('全品类')
let isCollect = ref<boolean>(false)
const emits = defineEmits<{
  (emitstr: 'onSelectMenu', emitData: {
    id?: string
    level?: number
    firstName: string
    secondName?: string
    thirdName?: string
  }): void
}>()
onMounted(() => {
  getList()
})
function onselect(id: string, level: number | undefined, firstName: string, secondName?: string, thirdName?: string) {
  if (selectId.value === id) {
    return
  }
  selectId.value = id
  selectName.value = thirdName ? thirdName : (secondName ? secondName : firstName)
  selectNameStr.value = `${firstName}${secondName ? '>' + secondName : ''}${thirdName ? '>' + thirdName : ''}`
  emits('onSelectMenu', { id: id === '0' ? undefined : id, level, firstName, secondName, thirdName })
  let token = localStorage.getItem('token')
  if (token) {
    getSheinTypefunc()
  }
}
function getSheinTypefunc() {
  getSheinType({ typeId: selectId.value }).then((res: any) => {
    isCollect.value = res.sub
  })
}
function onCollect(hadCollect: boolean) {
  if (hadCollect) {
    subType({ typeId: selectId.value }).then(res => {
      isCollect.value = !isCollect.value
      message.success('关注成功')
    })
  } else {
    unSubType({ typeId: selectId.value }).then(res => {
      isCollect.value = !isCollect.value
      message.success('取消成功')
    })
  }
}
function getList() {
  getSheinTypeTree({}).then((res: any) => {
    console.log(res);
    listData.value = res
    console.log(listData.value);
  })
}
</script>

<style scoped lang="less">
.flex1 {
  flex: 1;
}

.menu-container {
  display: flex;
  flex-direction: column;
  width: 250px;
  border-radius: 10px;
  height: 100%;
  background: #FFFFFF;
  margin-top: 10px;

  .selected-container {
    height: 150px;
    width: 250px;
    background-image: url('@i/menu-bg.png');
    background-size: 250px 150px;
    border-bottom: 1px solid #EFEFEF;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: 20px 30px;

    .select-name {
      font-size: 20px;
      font-weight: 600;
      line-height: 20px;
      display: flex;
      align-items: center;
    }

    .select-names {
      font-size: 14px;
      font-weight: normal;
      line-height: 16px;
      text-align: center;
      display: flex;
      align-items: center;
      color: #999999;
    }

    .collect-button {
      width: 110px;
      height: 32px;
      border-radius: 20px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      background: linear-gradient(90deg, #FA7D54 0%, #FF3F3F 99%);
      box-shadow: 0px 4px 10px 0px rgba(254, 68, 65, 0.3);
      font-size: 14px;
      font-weight: 500;
      line-height: 14px;
      color: #FFFFFF;
      cursor: pointer;
    }

    .uncollect-button {
      width: 96px;
      height: 32px;
      border-radius: 20px;
      background: #FFFFFF;
      border: 1px solid #FF6923;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      font-weight: 500;
      line-height: 14px;
      text-align: center;
      letter-spacing: 0em;
      color: #FF6923;
      cursor: pointer;
    }
  }

  .menu-list {
    display: flex;
    flex-direction: column;
    margin: 10px 12px;
    background: #fff;
    overflow-y: auto;

    .label {
      font-size: 16px;
      font-weight: normal;
      line-height: 16px;
      display: flex;
      align-items: center;
      letter-spacing: 0em;
      color: #999999;
      margin-bottom: 15px;
      cursor: pointer;
    }

    .arrow-icon {
      height: 100%;
      padding: 0 12px;
    }

    .act-item {
      background: #FEF8F4;
      color: #FF6923;
      cursor: none;
    }

    .menu-item {
      line-height: 46px;
      width: 100%;
      font-size: 16px;
      font-weight: 600;
      padding: 0 8px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      cursor: pointer;
    }

    .second-menu-item {
      line-height: 46px;
      width: 100%;
      font-size: 16px;
      padding: 0 8px 0 24px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      cursor: pointer;
    }

    .third-menu-item {
      line-height: 46px;
      width: 100%;
      font-size: 14px;
      padding: 0 8px 0 40px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      cursor: pointer;
    }
  }
}
</style>